
import React, { PureComponent } from 'react'
import { Form, Input, Button, Select, DatePicker } from 'antd';
import { connect } from 'react-redux'
const FormItem = Form.Item;
import dayjs from "dayjs";
import PageBackHeader from "@common/PageBackHeader";
import { withRouter } from 'react-router-dom'
import { getAllWarehouseSelection } from "@sagas/warehouse/warehouseManagement";
import { editEmployeeInfo, createEmployee, getRoleList } from "@sagas/employee";
import { getHistoryMatchParams } from "@utils/setUrlQuery";
import { telephoneValidation } from '@utils/regex'
const getReformedData = (data) => {
    const _data = {
        ...data
    }
    return {
        ..._data,
        entry_date:dayjs(data.entry_date)
    }
}

const initialValue = {
    name: '',
    entry_date: dayjs()
}
function mapStateToProps(state) {
    const { employee, warehouseManagement } = state
    return {
        employeeRoleList: employee.employeeRoleList,
        allWarehouseSelection: warehouseManagement.allWarehouseSelection,
    }
}

@connect(
    mapStateToProps
    , {
        getRoleList,
        getAllWarehouseSelection,
        editEmployeeInfo,
        createEmployee
    })
@withRouter
class EmployeeCreatePage extends PureComponent {

    constructor(props) {
        super(props);
        const { location } = props
        const { id } = getHistoryMatchParams(props)
        const { state } = location
        this.state = {
            id,
            formData: id ? {
                ...initialValue,
                ...getReformedData(state),
            } : {
                ...initialValue
            }
        }

        this.formRef = React.createRef()

        this.handleSubmit = this.handleSubmit.bind(this)
        this.submitForm = this.submitForm.bind(this)
        this.cancelFunc = this.cancelFunc.bind(this)
    }

    componentDidMount() {
        this.props.getRoleList()
        this.props.getAllWarehouseSelection()
    }

    handleSubmit(values) {
        const { id } = this.state
        const { editEmployeeInfo, createEmployee } = this.props
        console.log(values)
        if (id) {
            editEmployeeInfo({
                ...values,
                empId:id,
                entry_date:dayjs(values.entry_date).format('YYYY-MM-DD')
            },()=>{
                this.cancelFunc()
            })
        } else {
            createEmployee({
                ...values,
                entry_date:dayjs(values.entry_date).format('YYYY-MM-DD')
            },()=>{
                this.cancelFunc()
            })
        }
    }

    submitForm() {
        this.formRef.current?.submit()
    }

    cancelFunc() {
        this.props.goBack ? this.props.goBack() : this.props.history.goBack()
    }


    render() {
        const { formData, id } = this.state
        const { employeeRoleList, allWarehouseSelection } = this.props
        const isEdit = !!id
        return (
            <div className="bilin-web">
                <PageBackHeader title={isEdit ? '编辑员工' : '新建员工'} />
                <div className="bilin-web-body form-page with-footer">
                    <Form
                        ref={this.formRef}
                        name="warehouse-edit"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={formData}
                        scrollToFirstError={{
                            behavior: actions =>
                                actions.forEach(({ el, top, left }) => {
                                    el.scrollTop = top - 100
                                    el.scrollLeft = left
                                }),
                        }}
                        onFinish={this.handleSubmit}
                    >
                        <div className="ft-16 pdt-36 pdb-36">基本信息</div>
                        <FormItem
                            label="员工名称: "
                            name='name'
                            rules={[
                                { required: true, message: '请输入名称', },
                            ]}
                        >
                            <Input placeholder="请输入名称" />
                        </FormItem>
                        <FormItem
                            label="手机号: "
                            name='mobile'
                            rules={[
                                { required: true, message: '请输入手机号', },
                                { pattern: telephoneValidation, message: '请输入正确的手机号' }
                            ]}
                        >
                            <Input placeholder="请输入手机号" />
                        </FormItem>
                        <FormItem
                            label="入职日期: "
                            name='entry_date'
                            rules={[
                                { required: true, message: '请选择入职日期', },
                            ]}
                        >
                            <DatePicker />
                        </FormItem>
                        <div className="ft-16 pdt-36 pdb-36">角色信息</div>
                        <FormItem
                            label="品牌角色: "
                            name='role_id'
                            rules={[
                                { required: true, message: '请选择角色', },
                            ]}
                        >
                            <Select
                                placeholder="请选择角色"
                            >
                                {(employeeRoleList.roles || []).map(role => (
                                    <Select.Option
                                        key={role.role_id}
                                        value={role.role_id}
                                    >
                                        {role.role_name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </FormItem>
                        <FormItem
                            label="管理仓库: "
                            name='inventory_ids'
                            rules={[
                                { required: false, message: '请选择仓库范围', }
                            ]}
                        >
                            <Select
                                mode="multiple"
                                placeholder="请选择仓库范围"
                            >
                                {(allWarehouseSelection || []).map(warehouse => (
                                    <Select.Option
                                        key={warehouse.id}
                                        value={warehouse.id}
                                    >
                                        {warehouse.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </FormItem>

                    </Form>
                </div>
                <div className="bilin-web-footer">
                    <Button type="primary" ghost onClick={this.cancelFunc}>取消</Button>
                    <Button type="primary" onClick={this.submitForm}>{isEdit ? '确定修改' : '确定创建'}</Button>
                </div>
            </div>

        )
    }
}

export default EmployeeCreatePage